<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click to get a new Benkho!</title>
    <script>
        const images = [
            { src: 'benkho_imgs/1.png', description: "初始彬" },
            { src: 'benkho_imgs/2.png', description: "山楂彬" },
            { src: 'benkho_imgs/3.png', description: "牙疼彬" },
            { src: 'benkho_imgs/4.png', description: "彬之遥" },
            { src: 'benkho_imgs/5.png', description: "剧场彬" },
            { src: 'benkho_imgs/6.png', description: "抬头彬" },
            { src: 'benkho_imgs/7.png', description: "开心彬" },
            { src: 'benkho_imgs/8.png', description: "刘海该剪了彬" },
            { src: 'benkho_imgs/9.png', description: "卷毛彬" },
            { src: 'benkho_imgs/10.png', description: "花花彬" },
            { src: 'benkho_imgs/11.png', description: "皮痒彬" },
            { src: 'benkho_imgs/CA7905A20A937316D26803392C78359B.jpg', description: "穿衣服洗澡彬" },
            { src: 'benkho_imgs/13.png', description: "土卡彬" },
            { src: 'benkho_imgs/Molly.jpg', description: "茉莉奶白彬" },
            { src: 'benkho_imgs/basketball.jpg', description: "篮球彬" },
            { src: 'benkho_imgs/bb.jpg', description: "斑斑" },
            { src: 'benkho_imgs/butterfly.jpg', description: "蝴蝶彬" },
            { src: 'benkho_imgs/ct.jpg', description: "长（chang）腿彬" },
            { src: 'benkho_imgs/dfxsy.jpg', description: "东方彬" },
            { src: 'benkho_imgs/gc.jpg', description: "国潮彬" },
            { src: 'benkho_imgs/headache.jpg', description: "头疼彬" },
            { src: 'benkho_imgs/hlw.jpg', description: "葫芦娃彬" },
            { src: 'benkho_imgs/mls.jpg', description: "英俊彬" },
            { src: 'benkho_imgs/shui.jpg', description: "不是彬，但提醒你多喝水" },
            { src: 'benkho_imgs/wohoo.jpg', description: "吾湖彬" },
            { src: 'benkho_imgs/QQ图片20230316131304.png', description: "彬的肯定" },
            { src: 'benkho_imgs/QQ图片20230316131312.jpg', description: "走读彬" },
            { src: 'benkho_imgs/qlxz.jpg', description: "清冷彬" },
            { src: 'benkho_imgs/cqnd2.jpg', description: "纯情彬" },
            { src: 'benkho_imgs/xzs.jpg', description: "兰亭彬" }
            // Add more image paths and descriptions as needed
        ];
        function generateRandomImage() {

            document.getElementById('randomImage').style.marginTop = '200px';
            document.getElementById('randomImage').style.width = '50px';
            document.getElementById('randomImage').src = 'potato.png';      
            document.getElementById('imageDescription').innerText = '刘彬濠生成中';


            const randomIndex = Math.floor(Math.random() * images.length);
            const randomImage = images[randomIndex];


            let angle = 0;
            const interval = setInterval(() => {
                angle += 10;
                document.getElementById('randomImage').style.transform = `rotate(${angle}deg)`;
            }, 30);

            setTimeout(() => {
                const img = new Image();
                img.src = randomImage.src;
                img.onload = () => {
                    clearInterval(interval);
                    document.getElementById('randomImage').style.transform = 'rotate(0deg)';
                    document.getElementById('randomImage').src = img.src;
                    document.getElementById('imageDescription').innerText = '恭喜你抽到了：' + randomImage.description;
                    document.getElementById('randomImage').style.marginTop = '20px';
                    document.getElementById('randomImage').style.width = '300px';
                };
            }, 1000);

        
            // setTimeout(() => {
            //     clearInterval(interval);
            //     document.getElementById('randomImage').style.transform = 'rotate(0deg)';
            // }, 2160);

            // setTimeout(() => {
            //     document.getElementById('randomImage').src = randomImage.src;
            //     document.getElementById('imageDescription').innerText = '恭喜你抽到了：' + randomImage.description;
            //     document.getElementById('randomImage').style.marginTop = '20px';
            //     document.getElementById('randomImage').style.width = '300px';
            // }, 2000);



        }
    </script>

</head>
<body>
    <h1 style="text-align: center;">点击图片进行抽卡！</h1>

    <div style="position: relative; display: flex; flex-direction: column; align-items: center;">
        <h2 id="imageDescription" style="position: absolute; top: -30px; text-align: center;"></h2>
    </div>
    
    <div style="display: flex; flex-direction: column; align-items: center;">
        <!-- <img id="randomImage" src="benkho_imgs/1.png" alt="Random Image" style="margin-top: 20px; width: 300px;" onclick="generateRandomImage()"> -->
        <img src="potato.png" style="display: none;">
        <img id="randomImage" src="benkho_imgs/1.png" style="margin-top: 20px; width: 300px;" onclick="generateRandomImage()">
    </div>
</body>
</html>

